<template>
	<div style="border: 1px solid #ccc">
		<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
		<Editor style="height: 300px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
	</div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const props = defineProps({
	valueHtml:{
		type:Object
	}
})
const {valueHtml} = toRefs(props)
watch(valueHtml, () => {
console.log(valueHtml)
})
const editorRef = ref()

const mode = ref('default')
const toolbarConfig = {
	/* 工具栏配置 */
	toolbarKeys: [
		'bold',
		'clearStyle',
		'color',
		'bgColor',
		'|',
		// 菜单组，包含多个菜单
		{
			key: 'group-image', // 必填，要以 group 开头
			title: '图片', // 必填
			iconSvg: '',
			menuKeys: ['uploadImage', 'insertImage', 'deleteImage', 'editImage', 'viewImageLink']
		},
		{
			key: 'group-video',
			title: '视频',
			iconSvg: '',
			menuKeys: ['insertVideo', 'uploadVideo']
		},
		{
			key: 'group-link',
			title: '链接',
			menuKeys: ['insertLink', 'editLink', 'unLink', 'viewLink']
		},
		{
			key: 'group-table',
			title: '表格',
			menuKeys: [
				'insertTable',
				'deleteTable',
				'insertTableRow',
				'deleteTableRow',
				'insertTableCol',
				'deleteTableCol',
				'tableHeader',
				'tableFullWidth'
			]
		},
		'divider',
		'emotion',
		'blockquote',
		'headerSelect',
		'redo',
		'undo'
	]
}
const editorConfig = ref({
	placeholder: '请输入内容...',
	MENU_CONF: {
		uploadImage: {
			server: 'http://192.168.1.252/upload/videoUpload',
			fieldName: 'file',
			// 小于该值就插入 base64 格式（而不上传），默认为 0
			base64LimitSize: 50 * 1024
		},
		onUpdatedImage(imageNode) {
			if (imageNode == null) return
			const { src, alt, url } = imageNode
			console.log('updated image', src, alt, url)
		}
	}
})
onMounted(() => {})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	const editor = editorRef.value
	if (editor == null) return
	editor.destroy()
})

const handleCreated = (editor) => {
	editorRef.value = editor // 记录 editor 实例，重要！
}
</script>
<style scoped></style>
